<template>
  <div class="chart">
    <div style="height: 35%;" id="wordcloud"></div>
    <dv-scroll-board :config="config" style="width:100%;height:65%" />
  </div>
</template>

<script>

import { modelAccumulation } from '@/api';

let style = {
  fontSize: 24,
};
import 'echarts-wordcloud';

export default {
  data() {
    return {
      options: {},
      config: {
        header: ['排名', '模型标签', '模型数量'],
        oddRowBGC: 'transparent',
        evenRowBGC: 'transparent',
        data: [],
      },
    };
  },
  props: ['termId'],
  created() {
  },
  mounted() {
    this.getData();
  },
  beforeDestroy() {
  },
  methods: {
    async getData(cycleId) {
      const res = await modelAccumulation();
      const list = res.data.list;
      const data = list.map((i, ix) => {
        return [ix + 1, i.name, i.number];
      });
      this.config = { ...this.config, data };
      this.initChart(list);
    },
    initChart(items) {
      // 随机颜色
      let randcolor = () => {
        let r = 100 + ~~(Math.random() * 100);
        let g = 135 + ~~(Math.random() * 100);
        let b = 100 + ~~(Math.random() * 100);
        return `rgb(${r}, ${g}, ${b})`;
      };
      var myChart = this.$echarts.init(document.getElementById('wordcloud'));
      let datas = items.map(i => {
        return {
          name: i.name,
          value: i.number,
        };
      });
      let option = {
        // backgroundColor:'rgba(0,0,0,.5)',
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,.6)',
          borderColor: 'rgba(147, 235, 248, .8)',
          textStyle: {
            color: '#FFF',
            fontSize: 18,
          },
          padding: [10, 15],
          formatter: params => {
            const { name, value } = params;

            return `${name} <br/>
                    数量：${value}
                `;
          },
        },
        textStyle: {
          fontWeight: 'bold',
          // Color can be a callback function or a color string
          color: function() {
            // Random color
            return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
            ].join(',') + ')';
          },
        },
        series: [{
          type: 'wordCloud',
          gridSize: 20,
          sizeRange: [12, 40],
          rotationRange: [0, 0],
          shape: 'circle',
          textStyle: {
            normal: {
              color: params => {
                console.log('params', params);
                return '#FFF';
              },
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333',
            },
          },
          data: datas,
        }],
      };
      myChart.setOption(option);
    },
    clearData() {
    },
  },
};
</script>
<style lang='scss' scoped>
::v-deep.dv-scroll-board {
  .header {
    background-color: rgba(1, 149, 234, 0.3) !important;
  }
}

.chart {
  width: 100%;
  height: 100%
}
</style>
